<template>
    <div id="classify">
        <!--工具栏目-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0;">
            <el-form :inline="true" :model="Andata">
                <el-form-item>
                    <el-input type="number" min="0" v-model="Andata.id" placeholder="请输入要搜索的ID"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="Andata.name" placeholder="请输入要搜索的标题"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="Andata.type" clearable placeholder="请选择">
                        <el-option label="专辑" :value="0"></el-option>
                        <el-option label="普通" :value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getList">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleAdd">新增</el-button>
                </el-form-item>
            </el-form>
        </el-col>

        <!--TAble-->
        <el-table :data="AnalList" highlight-current-row v-loading="listLoading" @selection-change="selsChange"
                  style="width: 100%;">
            <el-table-column prop="id" label="ID" width="80"></el-table-column>
            <el-table-column prop="sort" label="排序" width="100" sortable>
                <template slot-scope="scope">
                    <el-input v-model.number="scope.row.sort" placeholder="请输入内容"
                              @blur="inputSort(scope.$index, scope.row)"
                              @focus="inputFocus(scope.$index, scope.row)"></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="名称"></el-table-column>
            <el-table-column label="操作" width="250">
                <template slot-scope="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
                    <el-button size="small" v-if="scope.row.subClassifyList.length>0" @click="handleSon(scope.$index, scope.row)">查看子分类</el-button>
                    <el-button type="primary" size="small" v-else @click="handleMin(scope.$index, scope.row)">添加子分类</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页-->
        <el-col :span="24" class="toolbar">
            <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="size"
                           :total="total" style="float:right;"></el-pagination>
        </el-col>
        <!--编辑-->
        <el-dialog title="编辑" v-model="editFormVisible" :close-on-click-modal="false" top="5%"
                   :before-close="abolish">
            <el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
                <el-form-item label="标题" prop="name">
                    <el-input v-model="editForm.name" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="排序值" prop="name">
                    <el-input type="number" v-model="editForm.sort" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="abolish">取消</el-button>
                <el-button type="primary" @click.native="editSubmit('editForm')" :loading="editLoading">提交</el-button>
            </div>
        </el-dialog>
        <!--新增-->
        <el-dialog title="添加分类" v-model="addFormVisible" :close-on-click-modal="false" top="5%">
            <el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
                <el-form-item label="标题" prop="name">
                    <el-input v-model="addForm.name" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="类型" prop="type" v-if="!addForm.pid">
                    <el-select v-model="addForm.type" clearable placeholder="请选择">
                        <el-option label="专辑" :value="0"></el-option>
                        <el-option label="普通" :value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="排序值" prop="sort">
                    <el-input type="number" v-model="addForm.sort" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="addFormVisible = false">取消</el-button>
                <el-button type="primary" @click.native="addSubmit('addForm')" :loading="addLoading">提交</el-button>
            </div>
        </el-dialog>
        <!--子分类-->
        <el-dialog title="子分类" v-model="editFormVisibleSon" :close-on-click-modal="false" top="5%"
                   :before-close="abolishSon">
            <el-row style="margin: 0 0 20px">
                <el-button type="primary" @click="handleAddBls">新增子分类</el-button>
            </el-row>
            <el-row class="over-Row">
                <el-col :span="24" v-for="(o, index) in listSon" :key="index" style="margin-bottom: 10px">
                    <el-card :body-style="{ padding: '0px' }">
                        <div style="padding: 14px;">
                            <p>名　称：<span v-text="o.name"></span></p>
                            <p>排序值：<span v-text="o.sort"></span></p>
                            <div class="bottom clear">
                                <el-button size="small" @click="handleEditSon(o)">编辑</el-button>
                                <el-button type="danger" size="small" @click="handleDelSon(o)">删除</el-button>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="abolishSon">关闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    /**
     * 分类管理
     */
    import util from '../../common/js/util';
    import {marketClassifyAdd,marketClassifyDelete,marketClassifyList,marketClassifyListId,marketClassifyUpdate} from '../../api/api';
    export default {
        data() {
            return {
                AnalList: [],
                total: 0,
                page: 1,
                size: 10,
                Andata: {
                    id: null,
                    name: '',
                    type: 0,
                    pid: 0
                },
                listLoading: false,
                sortNum: null,
                sels: [],
                /*编辑界面*/
                editFormVisible: false,//编辑界面是否显示
                editFormVisibleSon: false,//编辑界面是否显示
                editLoading: false,
                editFormRules: {
                    name: {required: true, message: '请输入标题', trigger: 'blur'}
                },
                //编辑界面数据
                editForm: {
                    name: ''
                },
                listId:null,
                listSon:[],
                addFormVisible: false,
                addLoading: false,
                addFormRules: {
                    name: {required: true, message: '请输入标题', trigger: 'blur'}
                },
                addForm: {
                    name: '',
                    type: 0,
                    sort: 0,
                    pid: null
                },
            }
        },
        methods: {
            selsChange: function (sels) {
                this.sels = sels;
            },
            handleCurrentChange(val) {
                this.page = val;
                this.getList();
            },
            /*
            * 列表获取
            * * */
            getList(){
                let para = {
                    page: this.page,
                    size: this.size,
                    data: this.Andata
                };
                this.listLoading = true;
                marketClassifyList(para).then((res) => {
                    console.log(res.data)
                    this.listLoading = false;
                    let {code, data} = res;
                    if (code !== 20000) {
                        this.$message({message: res.message, type: 'error'});
                    } else {
                        this.AnalList = data.content;
                        this.total = data.totalElements;
                    }
                });
            },
            handleAdd(){
                this.addFormVisible = true;
                this.addForm = {
                    name: '',
                    type: 0,
                    sort: 0,
                    pid: null
                };
            },
            handleAddBls(){
                this.addFormVisible = true;
                this.addForm = {
                    name: '',
                    type: 0,
                    sort: 0,
                    pid: this.listId
                };
            },

            handleMin(index,row){
                this.addFormVisible = true;
                this.addForm = {
                    name: '',
                    type: 0,
                    sort: 0,
                    pid: row.id
                };
            },
            /*
            * 新增
            * */
            addSubmit(a){
                this.$refs[a].validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            this.addLoading = true;
                            let para = this.addForm;
                            marketClassifyAdd(para).then((res) => {
                                this.addLoading = false;
                                this.$message({
                                    message: res.message,
                                    type: 'success'
                                });
                                this.addFormVisible = false;
                                this.getList();
                                if(this.addForm.pid !== null){
                                    this.obtainId(this.listId);
                                }
                            });
                        });
                    }
                })
            },
            /*
            * 编辑
            * */
            handleEdit(index,row){
                this.editFormVisible = true;
                this.editForm = Object.assign({}, row);
            },
            handleEditSon(id){
                this.editFormVisible = true;
                this.editForm = id;
            },
            handleDelSon(id){
                this.$confirm('确认提交吗？', '提示', {}).then(() => {
                    marketClassifyDelete(id.id,{id: id.id}).then((res) => {
                        this.editLoading = false;
                        this.$message({
                            message: res.message,
                            type: 'success'
                        });
                        this.obtainId(this.listId);
                    });
                });
            },
            editSubmit(a) {
                this.$refs[a].validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            this.editFormVisible = true;
                            let para = {
                                id : this.editForm.id,
                                name: this.editForm.name,
                                sort: this.editForm.sort
                            };
                            marketClassifyUpdate(para).then((res) => {
                                this.editLoading = false;
                                this.$message({
                                    message: res.message,
                                    type: 'success'
                                });
                                this.editFormVisible = false;
                                this.getList();
                            });
                        });
                    }
                })
            },
            /*
            * 取消编辑界面
            * */
            abolish() {
                this.editFormVisible = false;
                this.getList();
            },
            abolishSon() {
                this.editFormVisibleSon = false;
                this.getList();
            },
            /*
            * 查看子分类
            * */
            handleSon(index,row){
                this.editFormVisibleSon = true;
                this.listId = row.id;
                this.obtainId(row.id);
            },
            obtainId(isd){
                marketClassifyListId(isd, {id: isd}).then((res) => {
                    this.listSon = res.data.subClassifyList;
                });
            },
            /*
            * 删除
            * * */
            handleDel(index,row){
                this.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                    let para = {id: row.id};
                    let id = row.id;
                    marketClassifyDelete(id, para).then((res) => {
                        this.listLoading = false;
                        this.$message({
                            message: res.message,
                            type: 'success'
                        });
                        this.getList();
                    });
                }).catch(() => {
                });
            },
            /*
            * 排序
            * */
            inputFocus(index, row) {
                this.sortNum = row.sort;
            },
            inputSort(index, row) {
                if (this.sortNum === row.sort) return;
                this.listLoading = true;
                let para = {
                    id: row.id,
                    name: row.name,
                    sort: row.sort
                };
                marketClassifyUpdate(para).then((res) => {
                    this.$message({message: res.message, type: 'success'});
                    this.getList();
                    this.listLoading = false;
                })
            },
        },
        mounted() {
            this.getList();
        },
    }
</script>
<style type="text/scss" lang="scss" scoped>
    #classify {
        .mainImg {
            width: auto;
            height: 20px;
            vertical-align: middle;
        }
        .avatar-uploader {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            width: 182px;
            &:hover {
                border-color: #20a0ff;
            }
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
        .time {
            font-size: 13px;
            color: #999;
        }

        .bottom {
            margin-top: 13px;
            line-height: 12px;
            text-align: right;
        }

        .button {
            padding: 0;
            float: right;
        }

        .image {
            width: 100%;
            display: block;
        }

        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }

        .clearfix:after {
            clear: both
        }
        .over-Row{
            max-height: 600px;
            overflow-y: auto;
            border-bottom: 1px solid #d1dbe5;
        }
    }

    .clear {
        clear: both;
    }

    .clear:after {
        clear: both;
        content: ' ';
        display: block;
        font-size: 0;
        line-height: 0;
        visibility: hidden;
        width: 0;
        height: 0;
    }

    .clear {
        zoom: 1
    }
</style>